<template>
    <div>
        <ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
            <el-upload class="avatar-uploader" 
                action="" 
                drag
                multiple
                ref="uploadDefaultImage" 
                :file-list="formData.filelist"
                :show-file-list="true" 
                :on-change="handleChange"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :http-request="imgUploadRequest" 
                :on-success="imgUploadSuccess"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传dwg/dxf文件,且不超过50m</div>
            </el-upload>

            <template #footer>
                <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
                <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>
            </template>
        </ly-dialog>
    </div>
</template>

<script>
    import {mallPojectAdd,mallPojectEdit,mallPojectUpload} from "@/api/api";
    import LyDialog from "../../../components/dialog/dialog";
    export default {
        name: "addUser",
        components: {LyDialog},
        emits: ['refreshData'],
        data() {
            return {
                dialogVisible:false,
                loadingSave:false,
                loadingTitle:'',
                loadingPage:false,
                priceTable:[],
                formData:{
                    name:'',
                    filelist:[]
                },
            }
        },
        methods:{
            handleClose() {
                this.dialogVisible=false
                this.loadingSave=false
            },
            addModuleFn(item,flag) {
                this.loadingTitle=flag
                this.dialogVisible=true
                let that=this
                this.priceTable=[]
            },
            handleChange(uploadFile, uploadFiles) {
                if (this.formData.name==""){
                    this.formData.name=uploadFile.name
                }
                uploadFiles.push(uploadFile)

            },
            handlePreview(file) {
                console.log(file);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`); 
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submitData() {
                this.$emit('refreshData',this.priceTable)
                this.handleClose()
            },
            async imgUploadRequest(param) {
                var that = this
                let obj= await mallPojectUpload(param)
                if(obj.code == 2000) {
                    obj.data.data.forEach(element => {
                        that.formData.filelist.push(element)
                    });
                } else {
                    vm.$message.warning(obj.msg)
                }
            },
            imgUploadSuccess() {
                this.$refs.uploadDefaultImage.clearFiles()
                console.log(this.formData.filelist)
                this.isSubmit=false
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 128px;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
</style>

